<template>
  <div style="flex: 1">
    <div class="title">{{ text }}</div>
    <div style="width: 98%; height: 440px" ref="chart"></div>
  </div>
</template>
<script>
const echarts = require("echarts");
let xAxisData = [
  "01",
  "02",
  "03",
  "04",
  "05",
  "06",
  "07",
  "08",
  "09",
  "10",
  "11",
  "12",
];

let colorList = [
  {
    linecolor: "#6692FF",
    colorStart: "rgba(102, 146, 255, 1)",
    colorend: "rgba(102, 146, 255, 0.1)",
  },
  {
    linecolor: "#9AE7A8",
    colorStart: "rgba(154,231,168, 1)",
    colorend: "rgba(154,231,168, 0.1)",
  },
  {
    linecolor: "#F4E193",
    colorStart: "rgba(244,225,147, 1)",
    colorend: "rgba(244,225,147, 0.1)",
  },
  {
    linecolor: "#FF9566",
    colorStart: "rgba(255,149,102, 1)",
    colorend: "rgba(255,149,102, 0.1)",
  },
  {
    linecolor: "#AF66FF",
    colorStart: "rgba(175,102,255, 1)",
    colorend: "rgba(175,102,255, 0.1)",
  },
  {
    linecolor: "#FF6666",
    colorStart: "rgba(255,102,102, 1)",
    colorend: "rgba(255,102,102, 0.1)",
  },
];

export default {
  data() {
    return {
      text: "",
    };
  },
  methods: {
    showLonding() {
      let myChart = echarts.init(this.$refs.chart);
      myChart.showLoading({
        color: "#409EFF",
        text: "",
      });
    },
    initCharts(echartsData, echartText, legend) {
      let myChart = echarts.init(this.$refs.chart);
      myChart.clear();
      this.text = echartText;
      let option = {
        title: {
          // 无数据时占位用
          show: false, // 判断有没有数据，没有则show为true
          textStyle: {
            color: "#ccc",
            fontSize: 18,
          },
          text: "暂无数据",
          left: "center",
          top: "center",
        },
        backgroundColor: "#fff",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          formatter: function (params) {
            let tooltipStr = "";
            params.forEach((item) => {
              tooltipStr += `<div>${item.seriesName}&nbsp;&nbsp;${item.value}<br/></div>`;
            });
            return tooltipStr;
          },
        },
        grid: {
          top: "20%",
          left: "2%",
          right: "10%",
          bottom: "5%",
          containLabel: true,
        },
        legend: {
          icon: "rect",
          right: "0%",
          top: "2%",
          itemWidth: 20, // 设置宽度
          itemHeight: 4, // 设置高度
          itemGap: 40, // 设置间距
          textStyle: {
            //图例文字的样式
            color: "#111111",
            fontSize: 14,
          },
        },
        xAxis: {
          name: "月",
          boundaryGap: false,
          data: xAxisData,
          axisLine: {
            lineStyle: {
              color: "rgba(117, 168, 202, 0.4)",
            },
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
          },
          axisLabel: {
            color: "#111111",
            fontSize: 14,
            show: true,
          },
          nameTextStyle: {
            color: "#111111",
            padding: [0, 0, 6, 0],
            fontSize: 14,
          },
        },
        yAxis: [
          {
            name: "金额",
            type: "value",
            inverse: false,
            nameLocation: "end",
            // min: 0,
            // max: 600000,
            // interval: 100000,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(117, 168, 202, 0.3)",
                type: "dashed",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#0A5C95",
              },
            },
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#111111",
                fontSize: 14,
              },
            },
            nameTextStyle: {
              color: "#111111",
              padding: [0, -10, 6, 0],
              fontSize: 14,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        // dataZoom: [
        //   {
        //     type: 'slider',
        //     show: xAxisData.length > this.scrollLen ? true : false,
        //     startValue: 0,
        //     endValue: this.scrollLen - 1,
        //     height: '4',
        //     bottom: '1%',
        //     zoomLock: true,
        //     fillerColor: "#0587BD", // 滚动条颜色
        //     borderColor: "rgba(0,0,0, 0)",
        //     backgroundColor: "#4e5d6a",
        //     handleSize: 0, // 两边手柄尺寸
        //     showDetail: false // 拖拽时是否展示滚动条两侧的文字
        //   },
        //   {
        //     type: "inside", // 支持内部鼠标滚动平移
        //     zoomOnMouseWheel: true, // 关闭滚轮缩放
        //     moveOnMouseWheel: true, // 开启滚轮平移
        //     moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
        //   }
        // ],
        series: [],
      };

      if (echartsData) {
        option.series = [];
        echartsData.forEach((item, index) => {
          option.series.push({
            name: legend[index] + "年",
            type: "line",
            symbol: "emptyCircle", //设定为实心点
            showSymbol: false,
            smooth: true,
            itemStyle: {
              normal: {
                color: colorList[index].linecolor,
                lineStyle: {
                  //线的颜色
                  color: colorList[index].linecolor,
                  width: 1.5,
                },
                areaStyle: {
                  //新版渐变色实现
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: colorList[index].colorStart,
                      },
                      {
                        offset: 1,
                        color: colorList[index].colorend,
                      },
                    ],
                  },
                },
              },
            },
            data: item,
          });
        });
        // 绘制图表
        myChart.setOption(option);
        myChart.hideLoading();
      } else {
        // 绘制图表
        option.title.show = true;
        myChart.hideLoading();
        option.series = [];
        myChart.setOption(option);
      }
    },
  },
};
</script>

<style scoped>
.title {
  font-weight: bold;
  font-size: 16px;
  color: #222222;
}
</style>
